<template>
	<div id="record">
		<div class="boxes">
			<div class="head">
				<div class="box1">姓名</div>
				<div class="box1">类型</div>
				<div class="box2">问题</div>
			</div>
			<div class="page-example3" @click="handleButton($event)">
				<vue-seamless-scroll :data="listData" :class-option="defaultOption">
					<div class="ul-scoll" v-for="(item, index) in listData" :key="index">
						<div class="box1" :data-id="item.id">{{ item.uname }}</div>
						<div class="box1" :data-id="item.id">{{ item.typestr }}</div>
						<div class="box2" :data-id="item.id">{{ item.content }}</div>
					</div>
				</vue-seamless-scroll>
			</div>
		</div>
	</div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
// import {getDeptActivity} from "../../../network/api.js";
export default {
	name: 'feedback',
	props: {
		listData:{
			type:Array
		}
	},
	data() {
		return {
			// listData: [
			// 	{id:'1',type: '保养',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{id:'2',type: '保养2',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{id:'3',type: '保养3',name:'王小二',time1:'09:48:22',time2: '12:03:21'},
			// 	{id:'4',type: '保养4',name:'王小二',time1:'09:48:22',time2: '12:03:21'}
			// ]
		};
	},
	components: {
		vueSeamlessScroll
	},
	// 监听属性 类似于data概念
	computed: {
		defaultOption() {
			return {
				step: 0.2, // 数值越大速度滚动越快
				limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
				hoverStop: true, // 是否开启鼠标悬停stop
				direction: 1, // 0向下 1向上 2向左 3向右
				openWatch: true, // 开启数据实时监控刷新dom
				singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
				waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
			};
		}
	},
	beforeDestroy() {
	
	},
	mounted() {
	},
	methods: {
		handleButton(e){
			// console.log(e.target.dataset.type)
			this.$emit('transferid', e.target.dataset.id);
		}
	}
};
</script>

<style scoped lang="scss">
.boxes{
	width: 353px;
	height: 507px;
	padding: 16px 6px 10px 0px;
	color: #ffffff;
	
	.head{
		background-color: #395DBE;
		flex: 1;
		height: 36px;
		text-align: center;
		display: flex;
		justify-content: space-between;
		line-height: 36px;
		font-size: 18px;
		.box1{
			width: 25%;
		}
		.box2{
			width: 50%;
		}
	}
	.page-example3{
		width: 333px;
		height: 405px;
		text-align: center;
		overflow: hidden;
		margin: 20px 0;
		.ul-scoll{
			flex: 1;
			height: 36px;
			display: flex;
			justify-content: space-between;
			line-height: 36px;
			.box1{
				width: 25%;
			}
			.box2{
				width: 50%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				// text-align: left;
			}
		}
	}
}
</style>
